<template>
  <div class="container mx-auto w-4/5 py-4">
    <div id="solutionSection1">
      <a-typography-title id="mainTitle" :level="2" class="!text-3xl !font-bold !text-center !py-4 !px-0">
        短书教育培训 增长型经营闭环解决方案
      </a-typography-title>

      <a-row class="content_show flex" id="contentWrapper">
        <a-col :span="14" class="w-3/5">
          <img id="contentImage" src="https://picsum.photos/id/237/520/260" alt="解决方案示意图" class="w-11/12 h-full object-cover" />
        </a-col>

        <a-col :span="10" class="content1 pl-8 pt-8" id="featureSection">
          <div v-for="i in 4" :key="i" :id="`featureBlock${i}`" class="!mb-6">
            <a-typography>
              <a-typography-title :id="`featureTitle${i}`" :level="4" class="!text-xl !mb-2"> 全渠道溯源获客 </a-typography-title>
              <a-typography-text :id="`featureDesc${i}`" class="!text-sm !text-gray-500">
                跨越微信、钉钉、抖音、百度生态，获取全渠道生源
              </a-typography-text>
            </a-typography>
          </div>

          <div id="actionButtons" class="!mt-6">
            <a-button id="freeTrialButton" type="primary" size="large" class="!mr-3"> 免费体验 </a-button>
            <a-button id="featureIntroButton" size="large"> 功能介绍 </a-button>
          </div>
        </a-col>
      </a-row>
    </div>

    <div id="solutionSection1">
      <a-typography-title id="mainTitle" :level="2" class="!text-3xl !font-bold !text-center !py-4 !px-0">
        短书知识付费，全刅转化变现解决方案
      </a-typography-title>

      <a-row class="content_show flex" id="contentWrapper">
        <a-col :span="10" class="content1 pl-8 pt-8" id="featureSection">
          <div v-for="i in 4" :key="i" :id="`featureBlock${i}`" class="!mb-6">
            <a-typography>
              <a-typography-title :id="`featureTitle${i}`" :level="4" class="!text-xl !mb-2"> 全渠道溯源获客 </a-typography-title>
              <a-typography-text :id="`featureDesc${i}`" class="!text-sm !text-gray-500">
                跨越微信、钉钉、抖音、百度生态，获取全渠道生源
              </a-typography-text>
            </a-typography>
          </div>

          <div id="actionButtons" class="!mt-6">
            <a-button id="freeTrialButton" type="primary" size="large" class="!mr-3"> 免费体验 </a-button>
            <a-button id="featureIntroButton" size="large"> 功能介绍 </a-button>
          </div>
        </a-col>
        <a-col :span="14" class="w-3/5">
          <img id="contentImage" src="https://picsum.photos/id/237/520/260" alt="解决方案示意图" class="w-11/12 h-full object-cover" />
        </a-col>
      </a-row>
    </div>

    <div id="solutionSection">
      <a-typography-title id="mainTitle" :level="2" class="!text-3xl !font-bold !text-center !py-4 !px-0">
        短书笔记圈 学习型组织移动社群解决方案
      </a-typography-title>

      <a-row class="content_show flex" id="contentWrapper">
        <a-col :span="14" class="w-3/5">
          <img id="contentImage" src="https://picsum.photos/id/237/520/260" alt="解决方案示意图" class="w-11/12 h-full object-cover" />
        </a-col>

        <a-col :span="10" class="content1 pl-8 pt-8" id="featureSection">
          <div v-for="i in 4" :key="i" :id="`featureBlock${i}`" class="!mb-6">
            <a-typography>
              <a-typography-title :id="`featureTitle${i}`" :level="4" class="!text-xl !mb-2"> 全渠道溯源获客 </a-typography-title>
              <a-typography-text :id="`featureDesc${i}`" class="!text-sm !text-gray-500">
                跨越微信、钉钉、抖音、百度生态，获取全渠道生源
              </a-typography-text>
            </a-typography>
          </div>

          <div id="actionButtons" class="!mt-6">
            <a-button id="freeTrialButton" type="primary" size="large" class="!mr-3"> 免费体验 </a-button>
            <a-button id="featureIntroButton" size="large"> 功能介绍 </a-button>
          </div>
        </a-col>
      </a-row>
    </div>

    <a-row id="ctaSection" class="w-full h-[200px] bg-[#1d8def] mt-8 flex items-center justify-center">
      <a-space id="ctaContent" direction="vertical" align="center" class="text-center">
        <a-typography-title id="ctaTitle" :level="2" class="!text-3xl !text-white !mb-6">
          短书是如何帮助知识教育企业提升业绩的?
        </a-typography-title>

        <a-button id="demoButton" type="primary" size="large" class="!bg-white !text-[#1d8def] !border-none !h-12 !px-8">
          申请演示
        </a-button>
      </a-space>
    </a-row>
  </div>
</template>
  
<script setup lang="jsx">
    const stats = [
      { number: '20万+', label: '优质用户' },
      { number: '5000万+', label: '终端学员' },
      { number: '1亿+', label: '安全流水' },
      { number: '7000万+', label: '内容产出' },
    ];
  </script>
  
  <style>
/* 使用Tailwind覆盖默认样式 */
.ant-card-body {
  @apply p-4;
}
.ant-typography {
  @apply mb-0;
}
</style>
  